<script lang="ts" setup>
import { useRouter } from '@/router';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import { withdrawApply, withdrawInfo } from '@/api/user';
import { useUserStore } from '@/store/user';
import { round } from 'lodash-es';
import { useLocale } from '@/locale/locale';
import { format } from 'date-fns';
import { isWechat } from '@/utils/platform';

const router = useRouter();
const result = ref('success');
const userStore = useUserStore();
const money = ref<any>({});
const { t } = useLocale();
const time = ref(format(new Date(), 'yyyy-MM-dd hh:mm:ss'));
const info = ref<any>({
  balance: 0,
  minWithdrawalAmount: 0,
  serviceCharge: 0,
  afterDay: 0
});

const realMoney = computed(() => {
  return round(
    parseFloat(money.value) -
      round((parseFloat(money.value) * parseFloat(info.value.serviceCharge)) / 100, 2),
    2
  );
});

function returnBack() {
  uni.navigateBack({
    delta: 2
  });
}

async function reSubmit() {
  const payload: any = {
    ChannelId: 0,
    StaffId: 0,
    amount: money.value
  };
  if (userStore.user.rebateMode == 'STAFF') {
    payload.StaffId = userStore.user.staffId;
  } else {
    payload.ChannelId = userStore.user.channelId;
  }

  const res = await withdrawApply(payload);
  if (res.code == 0) {
    result.value = 'success';
  } else {
    result.value = 'fail';
  }
}

async function getInfo() {
  const payload: any = {
    ChannelId: 0,
    StaffId: 0
  };
  if (userStore.user.rebateMode == 'STAFF') {
    payload.StaffId = userStore.user.staffId;
  } else {
    payload.ChannelId = userStore.user.channelId;
  }
  var res = await withdrawInfo(payload);
  if (res.code == 0) {
    info.value = res.data;
  }
}

onLoad(async (options) => {
  result.value = options!.result;
  money.value = options!.money;

  getInfo();
});
</script>

<template>
  <view class="result-contain">
    <view class="result-contain-bg"></view>
    <view class="result-contain-view">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        backgroundColor="none"
        color="#FFFFFF"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
      <view class="result-contain-view-icon">
        <image
          :src="
            result == 'success'
              ? '/static/distribution/icon_success.png'
              : '/static/distribution/icon_fail.png'
          "
        />
        <view v-if="result == 'success'">{{ t('LDKey_distributionCommissionDetailSuccess') }}</view>
        <view v-else>{{ t('LDKey_distributionCommissionDetailFailed') }}</view>
      </view>
      <view class="result-contain-view-cont">
        <view class="result-contain-view-cont-line"></view>
        <view v-if="result == 'success'" class="result-contain-view-cont-success">
          <view class="result-contain-view-cont-success-top"></view>
          <view class="result-contain-view-cont-success-info">
            <view>
              <text>{{ t('LDKey_distributionCommissionDetailWithdrawAmount') }}</text>
              <text class="money">¥{{ money }}JPY</text>
            </view>
            <view>
              <text>{{ t('LDKey_distributionCommissionDetailWithdrawFee') }}</text>
              <text>{{ info.serviceCharge }}%</text>
            </view>
            <view>
              <text>{{ t('LDKey_distributionCommissionDetailWithdrawArrivalAmount') }}</text>
              <text class="money">¥{{ realMoney }}JPY</text>
            </view>
            <view>
              <text>{{ t('LDKey_distributionCommissionDetailSubmitTime') }}</text>
              <text>{{ time }}</text>
            </view>
          </view>
        </view>
        <view v-if="result == 'fail'" class="result-contain-view-cont-fail">
          <view class="result-contain-view-cont-fail-top"></view>
          <view class="result-contain-view-cont-fail-info">
            {{ t('LDKey_distributionCommissionDetailError') }}
          </view>
        </view>
      </view>
      <view class="result-contain-view-bottom">
        <view v-if="result == 'success'" class="result-contain-view-bottom-tips">
          {{ t('LDKey_distributionCommissionDetailTips', { day: info.afterDay }) }}
        </view>
        <view v-if="result == 'fail'" class="result-contain-view-bottom-btn">
          <view @click="returnBack">{{ t('LDKey_distributionCommissionDetailBack') }}</view>
          <view @click="reSubmit">{{ t('LDKey_distributionCommissionDetailReSubmit') }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.result {
  &-contain {
    position: relative;

    &-bg {
      background: #269c74;
      height: 490rpx;
    }

    &-view {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      &-icon {
        padding-top: 18rpx;

        image {
          display: block;
          width: 97rpx;
          height: 97rpx;
          margin: 0 auto;
        }

        view {
          margin-top: 32rpx;
          font-weight: 500;
          font-size: 36rpx;
          color: #ffffff;
          line-height: 50rpx;
          text-align: center;
        }
      }

      &-cont {
        position: relative;

        &-line {
          margin: 40rpx 20rpx 0;
          height: 20rpx;
          border-radius: 20rpx;
          background: #117954;
        }

        &-success {
          position: relative;
          top: -12rpx;
          margin: 0 34rpx;
          box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
          background: #ffffff;

          &-top {
            height: 20rpx;
            background: linear-gradient(
              180deg,
              rgba(18, 121, 85, 0.42) 0%,
              rgba(19, 122, 85, 0) 100%
            );
          }

          &-info {
            padding: 14rpx 32rpx 74rpx;

            view {
              display: flex;
              align-items: center;
              justify-content: space-between;

              text {
                &:first-child {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #3d3d3d;
                  line-height: 100rpx;
                }

                &:last-child {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #3d3d3d;
                  line-height: 100rpx;

                  &.money {
                    color: #eb3114;
                    font-weight: 500;
                  }
                }
              }
            }
          }
        }

        &-fail {
          position: relative;
          top: -12rpx;
          margin: 0 34rpx;
          box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
          background: #ffffff;

          &-top {
            height: 20rpx;
            background: linear-gradient(
              180deg,
              rgba(18, 121, 85, 0.42) 0%,
              rgba(19, 122, 85, 0) 100%
            );
          }

          &-info {
            height: 350rpx;
            line-height: 350rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
            text-align: center;
          }
        }
      }

      &-bottom {
        margin-top: 50rpx;

        &-tips {
          text-align: center;
          font-weight: 400;
          font-size: 24rpx;
          color: #adaeb0;
          line-height: 34rpx;
        }

        &-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0 34rpx;

          view {
            width: 330rpx;
            height: 76rpx;
            border-radius: 76rpx;
            text-align: center;
            font-weight: 500;
            font-size: 30rpx;
            line-height: 76rpx;

            &:first-child {
              border: 1px solid #c4c4c4;
              background: #ffffff;
              color: #3d3d3d;
            }

            &:last-child {
              border: 1px solid #269c74;
              background: #269c74;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
